<template>
  <div>
    <el-button size="default" style="width: 100%" @click="openDialog">接口数据</el-button>
    <drag-dialog title="接口数据设置" v-model="showDialog" append-to-body :close-on-click-modal="false" width="35%">
      <div v-if="formData.defaultValueAjax">
        <el-form :model="formData.defaultValueAjax" :rules="formRules" class="demo-form-inline" label-position="top" label-width="100px" ref="form">
          <el-form-item label="接口类型" prop="type">
            <el-select v-model="formData.defaultValueAjax.type" @change="handleTypeChange" clearable>
              <el-option v-for="(opt, idx) in typeOptions" :key="idx" :label="opt.label" :value="opt.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="url" prop="url">
            <api-selector v-if="formData.defaultValueAjax.type == 'ajax'" v-model="formData.defaultValueAjax.url" />
            <el-tag v-else-if="formData.defaultValueAjax.type == 'ajaxModel'">{{ formData.defaultValueAjax.url }}</el-tag>
            <el-input v-else v-model="formData.defaultValueAjax.url" placeholder="请输入url"> </el-input>
          </el-form-item>
          <el-form-item label="请求方式" v-if="formData.defaultValueAjax.type == 'ajaxLocal'">
            <el-radio-group v-model="formData.defaultValueAjax.method">
              <el-radio-button label="POST" value="post" />
              <el-radio-button label="GET" value="get" />
            </el-radio-group>
          </el-form-item>
          <el-form-item label="请求体类型" v-if="formData.defaultValueAjax.type == 'ajaxLocal'">
            <el-radio-group v-model="formData.defaultValueAjax.contentType">
              <el-radio-button label="FormData" value="formData" />
              <el-radio-button label="RawJSON" value="rawJson" />
            </el-radio-group>
          </el-form-item>
          <el-form-item label="选择模型" v-if="formData.defaultValueAjax.type == 'ajaxModel'">
            <el-select v-model="formData.defaultValueAjax.ajaxModel" filterable clearable @change="generateUrlByAjaxModelApi">
              <el-option v-for="opt in ajaxModelList" :key="opt.tableName" :label="`${opt.description}(${opt.tableName})`" :value="opt.tableName" />
            </el-select>
          </el-form-item>
          <el-form-item label="选择方法" v-if="formData.defaultValueAjax.type == 'ajaxModel'">
            <el-select v-model="formData.defaultValueAjax.ajaxApi" filterable clearable @change="generateUrlByAjaxModelApi">
              <el-option v-for="opt in ajaxApiList" :key="opt.dictValue" :label="`${opt.dictLabel}(${opt.dictValue})`" :value="opt.dictValue" />
            </el-select>
          </el-form-item>
          <el-form-item label="请求头" prop="headers">
            <anvil-dynamic v-model="formData.defaultValueAjax.headers" :children="option.children" />
          </el-form-item>
          <el-form-item label="请求体" prop="body">
            <anvil-dynamic v-model="formData.defaultValueAjax.body" :children="option.children" />
          </el-form-item>
          <el-form-item label="返回值jsonPath" prop="response">
            <el-input v-model="formData.defaultValueAjax.response" placeholder="请输入返回值的jsonPath" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </span>
      </template>
    </drag-dialog>
  </div>
</template>

<script>
import { cloneDeep } from 'lodash-es';
import { searchAllMda } from '@uni/api/uni/mda/table/info';

export default {
  props: {
    data: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      showDialog: false,
      formData: {},
      formRules: {
        type: [{ required: true, message: '类型不能为空', trigger: 'change' }],
        url: [{ required: true, message: 'url不能为空', trigger: 'blur' }],
        response: [
          {
            required: true,
            message: '返回值设置不能为空',
            trigger: 'blur'
          }
        ]
      },
      option: {
        children: {
          align: 'center',
          headerAlign: 'center',
          column: [
            {
              type: 'input',
              prop: 'key',
              label: 'key'
            },
            {
              type: 'input',
              prop: 'value',
              label: 'value'
            }
          ]
        },
        dynamicType: 'table',
        dynamicModel: 'common',
        widget: true
      },
      typeOptions: [
        {
          label: '注册接口调用',
          value: 'ajax'
        },
        {
          label: '模型接口调用',
          value: 'ajaxModel'
        },
        {
          label: '本地接口调用',
          value: 'ajaxLocal'
        }
      ],
      ajaxModelList: [], // 接口模型列表
      ajaxApiList: [] // 接口api列表
    };
  },
  computed: {
    baseUrl() {
      return import.meta.env.VITE_APP_BASE_API;
    }
  },
  watch: {
    data: {
      handler(newVal) {
        // if (newVal) {
        //   this.formData = _.cloneDeep(newVal);
        //   if (!this.formData.defaultValueAjax) {
        //     this.initData();
        //   }
        // }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    initData() {
      this.formData.defaultValueAjax = { url: '', headers: [], body: [], response: '' };
      // this.$set(this.formData, 'defaultValueAjax', {
      //   url: '',
      //   headers: [],
      //   body: [],
      //   response: ''
      // })
    },
    openDialog() {
      if (this.data) {
        this.formData = cloneDeep(this.data);
        this.searchAjaxModel();
        this.searchAjaxApi();
        if (!this.formData.defaultValueAjax) {
          this.initData();
        }
      }
      this.showDialog = true;
    },
    cancel() {
      this.showDialog = false;
    },
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$emit('submit', cloneDeep(this.formData));
          this.cancel();
        }
      });
    },
    handleTypeChange() {
      this.formData.defaultValueAjax.url = '';
      if (this.formData.defaultValueAjax.type == 'ajaxModel') {
        this.generateUrlByAjaxModelApi();
      } else if (this.formData.defaultValueAjax.type == 'ajaxLocal') {
        this.formData.defaultValueAjax.url = this.baseUrl;
      }
    },
    searchAjaxModel() {
      return searchAllMda({isEnable:'Y'}).then((res) => {
        this.ajaxModelList = res.data;
      });
    },
    searchAjaxApi() {
      this.getDicts('uni_mda_rest').then((response) => {
        this.ajaxApiList = response.data;
      });
    },
    generateUrlByAjaxModelApi() {
      this.formData.defaultValueAjax.url = `/uni/mda/${this.formData.defaultValueAjax.ajaxModel}/${this.formData.defaultValueAjax.ajaxApi}`;
    }
  }
};
</script>

<style></style>
